<!--  -->
<template>
  <div class="">
    <Nav title="地址管理">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="addresslists_con">
      <template v-for="(item,index) in addressData">
        <van-swipe-cell :key="index" class="">
          <div class="addresslists_item  flex justify-between" @click="selectDefault(item)" :key="index">
            <div class="addresslists_itemleft">
              <div class="addresslists_info flex aligin-center">
                <span class="f-15 pr-22">{{item.consigner}}</span>
                <span class="f-15 pr-22">{{item.mobile}}</span>
                <span class="addresslists_default" v-if="item.is_default">默认</span>
              </div>
              <div class="addresslists_specific mt-10">{{item.alias}}</div>
            </div>
            <div @click.stop="toBJ(item)" class="addresslists_edit">
              <img src="../../assets/imgs/edit@3x.png" alt="">
            </div>
          </div>
          <template slot="right">
            <span
              class="delete flex justify-center aligin-center f-12"
              @click="deleteAddress(item.id,index)"
            >删除</span>
            <span
              @click.stop="toBJ(item)"
              class="share flex justify-center aligin-center f-12"
            >编辑</span>
          </template>
        </van-swipe-cell>
      </template>
      <div class="no-data" v-if="addressData.length==0"></div>
    </div>
    <!-- 按钮 -->
    <div class="addresslists_foot">
      <router-link
        :to="{name:'addressadd',query:$route.query}"
        class="addresslists_btn btn_public flex justify-center aligin-center"
      >新建地址</router-link>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import { addressList,addressDestroy,set_default_addr } from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      addressData: [] //地址列表
    };
  },
  computed: {},
  watch: {},
  methods: {
    toBJ(item){
      this.$router.push({ name: 'addressEdit', params: { id: item.id },query:this.$route.query })
    },
    deleteAddress(id,index){
      addressDestroy({id}).then(res=>{
        this.addressData.splice(index,1);
      })
    },
    selectDefault(item){
      let params={
        id:item.id
      }
      if(this.$route.query.order_no){
        params=Object.assign(params,{from:this.$route.query.order_no})
      }
      set_default_addr(params).then(({data:{result}})=>{
        this.$toast(result)
        this.addressData.map(item=>{
          item.is_default=0
        })
        this.$set(item,"is_default",1)
        if(this.$route.query.order_no){
            this.$router.back()
        }
      })
    }
  },
  created() {},
  mounted() {
    addressList().then(({ data: { result } }) => {
      this.addressData = result;
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类

.addresslists_con {
  margin-bottom: 80px;
}
.addresslists_item {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 17px;
}
.addresslists_specific {
  line-height: 1.4;
}
.addresslists_default {
  color: #fff;
  padding: 5px;
  font-size: 12px;
  background: linear-gradient(
    265deg,
    rgba(232, 48, 56, 1) 0%,
    rgba(254, 114, 123, 1) 100%
  );
  border-radius: 2px;
}
.addresslists_edit img {
  width: 18px;
}
.addresslists_foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 28px;
  background: #fff;
  padding: 0 15px 28px;
}
.delete {
  display: inline-flex;
  height: 100%;
  width: 40px;
  background: #e5e5e5;
  color: #fff;
}
.share {
  display: inline-flex;
  height: 100%;
  width: 40px;
  background: #fe727b;
  color: #fff;
}
</style>